{include file="public/header"}

{include file="public/style"}       
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>物流管理</el-breadcrumb-item>
            <el-breadcrumb-item>快递资费列表</el-breadcrumb-item>
        </el-breadcrumb>
        <br>
            <el-card >
                <div style="display: flex;align-items: center;justify-content: flex-start;">
                    <el-form :inline="true" :model="searchForm" size="small"  ref="refsearchForm">                
                        <el-form-item label="物流商">
                            <el-select v-model="searchForm.p_id" clearable filterable placeholder="请选择物流商" @change="changeProvider">
                                <el-option v-for="item in provider" :key="item.id" :label="item.name_Cn" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item> 
                        
                        <el-form-item label="快递渠道" >						
                            <el-select v-model="searchForm.name_cn" clearable filterable placeholder="请选择快递渠道" style="width: 280px;">
                                <el-option v-for="item in logistics" :key="item.code" :label="item.name" :value="item.code"></el-option>                             
                            </el-select>
                        </el-form-item>

                        <el-form-item label="国家"  >
                            <el-select v-model="searchForm.countrys" clearable filterable placeholder="请选择国家">
                               <el-option v-for="item in countrys" :key="item.countryid" :label="item.name" :value="item.countryid"></el-option>
                            </el-select>
                        </el-form-item>
    
                        <el-form-item>
                            <el-button type="primary"  size="small" plain @click="getSearch" icon="el-icon-search" v-cloak>查询</el-button>
                        </el-form-item>          
                      </el-form>
                    
                    <div style="margin-left: auto;margin-bottom: 20px;margin-right: 20px;" >
                            <el-button  type="primary"   @click="create" size="small"  icon="el-icon-edit" >添加快递资费</el-button>       
                    </div>
                </div>  

                
                <el-table :data="tablelist"      :span-method="objectSpanMethod"   border style="width: 100%;margin-bottom: 20px;"  ref="table"  >                      
                    <el-table-column prop="countrys"  label="国家英文简称" align="center" ></el-table-column>
                    <el-table-column prop="countrysCN"  label="国家" align="center"  ></el-table-column>
                    <el-table-column prop="name_Cn" label="快递渠道名称" width="280"></el-table-column>
                    <el-table-column prop="name_En" label="快递代码" ></el-table-column>
                    <el-table-column prop="range" label="重量区间(g)"></el-table-column>
                    <el-table-column prop="dealcost" label="处理费用">
                        <template slot="header">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">挂号费:RMB/票</div>
                            <span>处理费用 <i class="el-icon-question"></i> </span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="unitcost" label="单位资费">
                        <template slot="header">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">运费:RMB/KG</div>
                            <span>单位资费 <i class="el-icon-question"></i> </span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="minweight" label="最低重量(g)"></el-table-column>
                    <el-table-column prop="maxweight" label="最高重量(g)"></el-table-column>
                    
                    <el-table-column prop="peak_period_cost" label="旺季费用"></el-table-column>
                    <el-table-column   prop="createtime" label="添加时间" width="180"> </el-table-column>  

                    <el-table-column  fixed="right" label="操作" width="180">
                        <template v-slot="{row}">
                            <el-button type="primary"  plain  icon="el-icon-edit"  @click="editor(row)" >编辑 </el-button>
                                  
                        </template>
                    </el-table-column>
                </el-table>    
                <!-- page -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pagenum" :page-sizes="[20,50,100, 150, 300,500,1000,2000]"
                    :page-size="searchForm.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>  
            </el-card>


              <!-- 修改编辑弹窗 -->
            <el-dialog :title="title" :visible.sync="ExpressVisible " width="920px" :close-on-click-modal="false">
                <el-card class="box-card" shadow="always" v-if="ShowExpressInfo">
                    <el-form  :model="createForm" size="small"  :rules="isproviderules"   label-width="100px" ref="refsearchForm"    label-position="left">             

                        <el-form-item label="物流商" prop="p_id" >
                            <el-select v-model="createForm.p_id" clearable filterable placeholder="请选择物流商" @change="changeProvider" style="width: 250px;">
                                <el-option v-for="item in provider" :key="item.id" :label="item.name_Cn" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item> 
                    
                        <el-form-item label="快递渠道" prop="name_En" >                      
                            <el-select v-model="createForm.name_En" clearable filterable placeholder="请选择快递渠道" style="width: 250px;">
                                <el-option v-for="item in logistics" :key="item.code" :label="item.name" :value="item.code"></el-option>  
                            </el-select>
                        </el-form-item>
                
                        <el-form-item label="国家" prop="countrys" >
                            <el-select v-model="createForm.countrys" clearable filterable placeholder="请选择国家" style="width: 250px;" @change="expandChange">
                                <el-option v-for="item in countrys" :key="item.countryid" :label="item.name" :value="item.countryid"></el-option>
                            </el-select>
                        </el-form-item>  
                    </el-form>     
                </el-card>   
                     
                <el-card class="box-card" shadow="always" v-if="ExpressInfo">
                    <el-descriptions class="margin-top" title="快递基本信息" :column="3"  >
                        <el-descriptions-item label="国家">{{ExpressInfoData.countrys}}</el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions class="margin-top" title="" :column="3" >
                        <el-descriptions-item label="快递渠道">{{ExpressInfoData.name_Cn}}</el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions class="margin-top" title="" :column="3"  >
                        <el-descriptions-item label="快递代码">{{ExpressInfoData.name_En}}</el-descriptions-item>
                    </el-descriptions>
                </el-card>        
                <!-- 资费列表 -->
                    <el-table :data="ExpressListData"  border  :header-cell-style="tableHeaderColor" v-if="showExpressLists" height="500">
                    <el-table-column prop="range" label="重量区间(g)" width="130" align="center"></el-table-column>                    
                    <el-table-column prop="dealcost" label="处理费用" width="100" align="center">

                        <template slot="header">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">挂号费:RMB/票</div>
                            <span>处理费用 <i class="el-icon-question"></i> </span>
                            </el-tooltip>
                        </template>

                        <template v-slot="{row}">
                            <div v-if="!row.isEdit">{{ row.dealcost }}</div>
                            <div v-else>
                            <el-input v-model="row.dealcost" size="small"></el-input>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="unitcost" label="" width="100" align="center">

                        <template slot="header">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">运费:RMB/KG</div>
                            <span>单位资费 <i class="el-icon-question"></i> </span>
                            </el-tooltip>
                        </template>

                        <template v-slot="{row}">
                            <div v-if="!row.isEdit">{{ row.unitcost }}</div>
                            <div v-else>
                            <el-input v-model="row.unitcost" size="small"></el-input>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="minweight" label="最低重量(g)" width="100" align="center">
                        <template v-slot="{row}">
                            <div v-if="!row.isEdit">{{ row.minweight }}</div>
                            <div v-else>
                            <el-input v-model="row.minweight" size="small"></el-input>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="maxweight" label="最高重量(g)" width="100" align="center">
                        <template v-slot="{row}">
                            <div v-if="!row.isEdit">{{ row.maxweight }}</div>
                            <div v-else>
                            <el-input v-model="row.maxweight" size="small"></el-input>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="peak_period_cost" label="旺季费用" width="80" align="center">
                        <template v-slot="{row}">
                            <div v-if="!row.isEdit">{{ row.peak_period_cost }}</div>
                            <div v-else>
                            <el-input v-model="row.peak_period_cost" size="small"></el-input>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="" label="操作" align="center">
                        <template v-slot="{row}">
                            <el-button type="primary" size="mini"  icon="el-icon-edit"  @click="openEditExpress(row)" >{{ row.isEdit ? '保存' : '编辑' }}</el-button>
                          <el-button type="danger"  size="mini" icon="el-icon-delete" @click="delEditExpress(row)" ></el-button> 
                        </template>
                    </el-table-column>
                </el-table>   
        
                <br>

                <div>
                    <el-row>
                        <el-button type="primary" icon="el-icon-plus" @click="addInput" size="small">添加快递资费</el-button>
                    </el-row>
                </div>
                <br>
              
                <el-form :inline="true"  :model="Create_Form" size="small"  :rules="addrules"   label-width="100px" ref="refeditForm"> 
                    <el-row :gutter="24">
                        <div v-for="item in Expresstable" :key="item.id" > 
        
                            <el-form-item label="处理费用"  >
                                <el-input v-model="item.dealcost" class="el-input" placeholder="输入处理费用或挂号费" clearable></el-input>
                            </el-form-item>  
        
                            <el-form-item label="单位资费"  >
                                <el-input v-model="item.unitcost" class="el-input" placeholder="输入单位资费或运费" clearable></el-input>
                            </el-form-item>  
        
                            <el-form-item label="最低重量"  >
                                <el-input v-model="item.minweight" class="el-input" placeholder="输入最低重量，必填" clearable></el-input>
                            </el-form-item>  
        
                            <el-form-item label="最高重量"  >
                                <el-input v-model="item.maxweight" class="el-input" placeholder="输入最高重量，必填" clearable></el-input>
                            </el-form-item>  
        
                            <el-button  icon="el-icon-close" type="danger" size="small" @click="removeDomain(item)" style="margin-left: 30px;"></el-button> 
                         
                        </div>
                    </el-row>
                </el-form> 
    
                <div slot="footer" class="dialog-footer" v-if="ExpressSaveButton">
                    <el-button @click="close()">取 消</el-button>
                    <el-button type="primary" @click="Expresstables()" >添加</el-button>
                </div>
               
            </el-dialog>   
    </div>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {       
                    title:'',           
                    ExpressVisible:false,//控制配置弹窗
                    provider:{$provider|raw},//物流商
                    countrys:{$countrys|raw},//国家
                    logistics:[],//快递渠道
                    total:0,   //分页总页数      
                    ExpressInfo:false, 
                    ShowExpressInfo:false,//是否显示快递信息
                    ExpressInfoData:{},//快递信息
                    tablelist:[] ,              
                    searchForm: {                              
                        name_En: '',                                             
                        countrys: '',   
                        p_id:'',      
                        pagesize: 20,
                        pagenum: 1,
                        
                    },     
                    inputNum:0,               
                    platform:[], 
                    createForm:{
                        id:'',
                        p_id:'',          
                        name_En:'',                      
                        countrys: '', 
                        account_name:'', 
                        account_password:'',  
                        authorizeCode:'',           
                    },
                    isproviderules: {
                        name_En: [
                            { required: true, message: '请选择快递渠道', trigger: 'change' },
                        ],  
                        countrys: [
                            { required: true, message: '请选择国家', trigger: 'change' },
                        ],   
                        p_id   : [
                            { required: true, message: '请选择服务商', trigger: 'change' },
                        ],   
                        account_password   : [
                            { required: true, message: '请输入服务密码', trigger: 'blur' },
                        ],          
                    },
                    addrules:{
                        dealcost: [
						{ required: true, message: '请输入处理费用', trigger: 'blur' },
                        ],
                        unitcost: [
                            { required: true, message: '请输入单位资费', trigger: 'blur' },
                        ],
                        minweight: [
                            { required: true, message: '请输入最低重量', trigger: 'blur' },
                        ],
                        maxweight: [
                            { required: true, message: '请输入最高重量', trigger: 'blur' },
                        ],
                    },
                    showExpressLists:false,//控制表格的增加
                    ExpressListData:[],//资费数据
                    Expresstable:[],
                    ExpressSaveButton:false,
                    Create_Form:{
                        dealcost:'',
                        unitcost:'',
                        minweight:'',
                        maxweight:''
                    },
                    spanArr: [],//合并单元格
                    testPosition1:[]
                    
                }
            },
            mounted(){        
              
            },
            methods: {        

                async getDatalist() {
                    const res = await axios.post('/admin/logistics/charge', {params: this.searchForm})
                        if (res.status !== 1) {
                            return this.$message.error(res.info);
                        }
                    this.testPosition1 = []
                    this.$nextTick(()=>{
                        this.rowspan(this.spanArr, this.testPosition1, 'countrys');
                    })

                    this.$refs.table.doLayout();

                    this.total = res.info.total
                    this.tablelist = res.info.list
                },
                tableHeaderColor ({row, column, rowIndex, columnIndex}) { 
                  return 'background-color: #f9f9f9;color:#666666;font-size:14px;'
               },
                handleSizeChange(newSize) {
                    this.searchForm.pagesize = newSize
                    this.getDatalist()
                },
                handleCurrentChange(newPage) {
                    this.searchForm.pagenum = newPage
                    this.getDatalist()
                },              
                getSearch() {
                    this.searchForm.pagenum = 1
                    this.getDatalist()
                },        
                //编辑
                editor(row){      
                    console.log()   
                    this.title = '编辑快递资费'
                    this.ExpressVisible = true          
                    this.ExpressInfoData=row;      
                    this.createForm.p_id = row.p_id         
                    this.createForm.name_En = row.name_En    
                    this.createForm.countrys =row.countrys        
                    // this.createForm=JSON.parse(JSON.stringify(row));       
                    this.ExpressInfo = true  //是否是修改数据       
                    this.ShowExpressInfo = false    
                    this.expandChange()                  
                },
                //添加快递资费
                create(){
                    this.title = '添加快递资费'
                    this.ExpressVisible = true
                    this.createForm.id = ''                      
                    this.createForm.p_id = ''         
                    this.createForm.name_En = ''   
                    this.createForm.countrys =''       
                    this.ExpressInfo = false  //是否是修改数据
                    this.ShowExpressInfo=true
                    this.ExpressListData=[]
                },      
         
                rowspan(spanArr, position, spanName) {
                    this.tablelist.forEach((item, index) => {
                    if (index === 0) {
                        spanArr.push(1);
                        position = 0;
                    } else{
                        if (
                        this.tablelist[index][spanName] ===
                        this.tablelist[index - 1][spanName]
                        ) {
                            spanArr[position] += 1;
                            spanArr.push(0);
                        } else {
                            spanArr.push(1);
                            position = index;
                        }
                    }
                    });
                },

                //合并单元格
                objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                    console.log(this.spanArr);
                        if (columnIndex === 0) {
                            const _row = this.spanArr[rowIndex];
                            const _col = _row > 0 ? 1 : 0;
                            return {
                                rowspan: _row,
                                colspan: _col,
                            };
                        }
                },
                //修改是否是菜单
                handleSwitchChange(row) {
                    if(row.status==0){
                       this.$confirm('确认关闭该服务商,如果关闭，则会下面快递渠道也会无效哦？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            closeOnClickModal: false, // 禁用点击遮罩关闭弹窗
                            type: 'warning'
                        }).catch(() => {
                            this.createForm.status = 1;
                        });         
                    }               
                },
                //    
                //关闭弹窗
                close(){
                    this.ExpressVisible=false  
                }, 
                 //切换物流商
                async changeProvider(row){
                    const res = await axios.post('/admin/logistics/channel_list', {params: {p_id: row,type:1}})
                        if (res.status !== 1) {
                            return this.$message.error(res.info);
                        }
                    this.logistics = res.info
                },
                	//获取是否已存在的快递资费信息
                async expandChange(){
                    const res = await axios.post('/admin/logistics/channel_list',{params:{countrys:this.createForm.countrys,name_En:this.createForm.name_En,type:2}});
                 
                        this.ExpressListData=res.info;
                    
                        this.showExpressLists = true;
                },
                // 添加快递资费-动态添加input
                addInput  () {
                    this.$refs.refsearchForm.validate(async valid => {
                        if (!valid) {
                            return;
                        } else {
                            if(this.inputNum > 0){
                                return this.$message.error('请先保存或添加完该条数据，在添加下一条');
                            }
                            this.Expresstable.push({ dealcost: '', unitcost: '', minweight: '', maxweight: '' })
                            this.inputNum = 1
                            this.ExpressSaveButton = true
                                
                        }
                    });
                },
                //修改&添加快递资费-删除input
                removeDomain(item) {                 
                    var index = this.Expresstable.indexOf(item)
                    // console.log(index)
                    if (index !== -1) {
                        this.inputNum = 0
                        this.Expresstable.splice(index, 1)
                        this.ExpressSaveButton = false
                    }
                },
                //修改&添加快递资费-保存
                Expresstables(){ 
                    let checkExpress = true;
                    this.Expresstable.forEach(item => {
                        if(!item.minweight){
                            checkExpress = false;
                            return this.$message.error('最低重量不允许为空！');                           
                        }
                        if(!item.maxweight){
                            checkExpress = false;
                            return this.$message.error('最高重量不允许为空！');
                          
                        }
                        if(parseInt(item.maxweight) < parseInt(item.minweight)){
                            checkExpress = false;
                            return this.$message.error('最高重量必须大于最低重量！');                         
                        }
                    });                
                    if(checkExpress){
                        let loading = this.$loading({
                                lock: true,
                                text: '数据加载中···',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                                });
                            axios.post('/admin/logistics/charge_create', {params:{id:this.createForm.id,countrys:this.createForm.countrys,name_En:this.createForm.name_En,p_id:this.createForm.p_id,dealcost:this.Expresstable[0]['dealcost'],unitcost:this.Expresstable[0]['unitcost'],minweight:this.Expresstable[0]['minweight'],maxweight:this.Expresstable[0]['maxweight']}}).then(res => {
                                loading.close()
                                if (res.status !== 1) {
                                    return this.$message.error(res.info);                  
                                }
                                this.expandChange()                
                        
                            var index = 0;
                                if (index !== -1) {
                                    this.inputNum = 0
                                    this.Expresstable.splice(index, 1)
                                    this.ExpressSaveButton = false
                                }                         
                                this.$message.success('操作成功');
                            
                                this.getDatalist()
                        }).catch(err => {
                            console.log(err)
                        })
                    }                    
                },
                //打开编辑框
                async openEditExpress(row) {
                    //isEdit有值 打开编辑
                    if (row.isEdit) {
                    
                        this.$delete(row, 'isEdit')

                         this.Expresstable.forEach(item => {
                            if(!row.minweight){
                                checkExpress = false;
                                return this.$message.error('最低重量不允许为空！');                           
                            }
                            if(!row.maxweight){
                                checkExpress = false;
                                return this.$message.error('最高重量不允许为空！');
                            
                            }
                            if(parseInt(row.maxweight) < parseInt(row.minweight)){
                                checkExpress = false;
                                return this.$message.error('最高重量必须大于最低重量！');                         
                            }
                        });  
                        if(checkExpress){
                            let loading = this.$loading({
                            lock: true,
                            text: '数据加载中···',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                            });
                            axios.post('/admin/logistics/charge_create', {params:{id:row.id,countrys:this.createForm.countrys,name_En:this.createForm.name_En,p_id:this.createForm.p_id,dealcost:row.dealcost,unitcost:row.unitcost,minweight:row.minweight,maxweight:row.maxweight}}).then(res => {
                                loading.close()
                                if (res.status !== 1) {
                                    return this.$message.error(res.info);                  
                                }
                                this.$message.success('操作成功');
                                this.expandChange() 
                                if($this.createForm.p_id){
                                    this.getSearch()
                                }
                            
                            }).catch(err => {
                                console.log(err)
                            })
                        }    
                       
                    }else {
                        this.$set(row, 'isEdit', true);
                    }
                },       
                
                //删除快递资费
                async delEditExpress(row){
                    if(row){
                        let loading = this.$loading({
                            lock: true,
                            text: '数据删除中···',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        const res = await axios.post('/admin/logistics/charge_detele',{params:row})
                        loading.close()
                        if (res.status !== 1) {
                            return this.$message.error(res.info);
                        }else{
                            this.expandChange()       
                            this.getDatalist()      
                            this.$message.success('操作成功');
                        }
                    }

                },        
            }
        })
    </script>
 </body> 
</html>
